import React, { memo, useEffect, useState, useMemo } from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from "@ant-design/icons"

import { Modal, message } from 'antd';

import { useHistory } from "react-router-dom"

import { updataUserHeader } from "api"
export default memo(function Bread(props) {
    const [userdata, setuserdata] = useState(null)
    const [base, setbase] = useState("")
    const [isshow, setisshow] = useState(false)
    const [isModalVisible, setIsModalVisible] = useState(false);

    const route = useHistory()
    useEffect(() => {
        let userdata = JSON.parse(sessionStorage.getItem("userdata"))
        let base = sessionStorage.getItem("base")
        // console.log(userdata)
        if (userdata && base) {
            setuserdata(userdata)
            setbase(base)
        }

    }, [])


    const result = useMemo(() => {
        if (userdata) {
            switch (userdata.shengfen) {
                case 0:
                    return "学生"
                case 1:
                    return "老师"
                case 2:
                    return "管理员"
            }
        }

        return null
    }, [userdata])

    // 退出
    const out = () => {
        showModal()

    }

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        sessionStorage.clear()
        message.success("退出成功")
        route.replace("/login")
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 打开上传头像 
    const updataHeader = () => {
        document.querySelector("#userHaeader").click()
    }

    // 头像上传
    const headerChange = async (e) => {
        var file = e.target.files[0];
        var param = new FormData();
        param.append("_id", userdata._id);
        param.append(e.target.name, file, file.name);
        let data = await updataUserHeader(param);
        // console.log(data)
        if (data.code-0 === 200) {
            message.success(data.msg);
            sessionStorage.setItem("userdata", JSON.stringify(data.data))
            setuserdata(data.data)
        }
    }

    return (
        <div className="bread_cover">
            <div className="left">
                {
                    props.collapsed ?
                        <MenuUnfoldOutlined style={{ fontSize: "24px" }} onClick={() => { props.switchCollapsed() }} /> :
                        <MenuFoldOutlined style={{ fontSize: "24px" }} onClick={() => { props.switchCollapsed() }} />

                }

                <ul className="bread_title">
                    {
                        props.title.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }

                </ul>
            </div>

            <div className="userdata">
                <div className="bck" onMouseLeave={() => { setisshow(false) }} onMouseEnter={() => { setisshow(true) }}>
                    <div onClick={updataHeader} className={[isshow ? '' : 'hide', "pos_bck"].join(" ")}>上传
                        <br />
                        头像</div>
                    {
                        userdata !== null && base !== null ? <img src={`${base}${userdata.headerUrl}`} alt="" /> : null
                    }

                    <input
                        type="file"
                        name="headerurl"
                        id="userHaeader"
                        onChange={headerChange}
                    />

                </div>
                {
                    userdata !== null ? <p>
                        {
                            `${userdata !== null && userdata.username}(${result})`
                        }
                    </p> : null
                }

                <span onClick={out}>
                    退出
                </span>
            </div>

            <Modal title="提示" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>确定退出吗？</p>

            </Modal>

        </div>
    )
})
